<template>
  <div class="add-borrower-wrap">
    <div class="first-step-container" v-if="!firstStepComplete">
      <div class="first-step-header">
        <x-header>
          添加新借款人
        </x-header>
      </div>
      <div class="bid-dialog">
        <div class="title">
          借款类型:
        </div>
        <group>
          <selector placeholder="请选择发标类型" v-model="bidKind" :options="list"></selector>
        </group>
        <group>
          <selector placeholder="请选择发标子类" v-model="bidKind" :options="list1"></selector>
        </group>
        <group>
          <selector placeholder="请选择借款类型" v-model="bidKind" :options="list2"></selector>
        </group>
      </div>
      <div class="next-step">
        <x-button type="default" action-type="button" @click.native="nextStep">下一步</x-button>
      </div>
    </div>
    <div class="second-step-container" v-else>
      <div class="second-step-header">
        <x-header>
          新增
        </x-header>
      </div>
      <div class="toggle-nav">
        <span class="base-info" :class="[isBaseInfoFill ? '' : 'current-clr']">基本信息</span>
        <span class="attachments-upload" :class="[!isBaseInfoFill ? '' : 'current-clr']">附件上传</span>
      </div>
      <div class="baseinfo-container" v-if="!isBaseInfoFill">
        <div class="baseinfo-dialog">
          <group>
            <x-input label-width="9em" title='申请借款金额(月):' placeholder='请输入申请金额'></x-input>
          </group>
          <group>
            <x-input label-width="9em" title='申请借款期限(月):' placeholder='请输入申请期限'></x-input>
          </group>
          <group>
            <x-input title='借款公司名称:'></x-input>
          </group>
          <group>
            <x-input title='借款人联系方式:'></x-input>
          </group>
        </div>
        <div class="bottom-btn">
          <button @click="cache">暂存</button>
          <button @click="addNextStep">下一步</button>
        </div>
      </div>
      <div class="attachments-upload-container" v-else>
        <div class="attachments-dialog">
          <div class="certificate-upload">
            <div class="title">
              法人身份正反面
            </div>
          </div>
        </div>
        <div class="bottom-btn">
          <button @click="addPrevStep">上一步</button>
          <button @click="submitExamine">提交审核</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        bidKind: "",
        list: [
          {
            key: "gd",
            value: "金商保"
          }
        ],
        list1: [
          {
            key: "gd",
            value: "信用借款"
          }
        ],
        list2: [
          {
            key: "gd",
            value: "企业借款"
          }
        ],
        firstStepComplete: true,
        isBaseInfoFill: false
      };
    },
    methods: {
      nextStep() {
        if (this.canGoNextStep()) {
          this.firstStepComplete = true;
        }
      },
      // 新增下一步
      addNextStep() {
        this.toggleStyle();
      },
      addPrevStep() {
        this.toggleStyle();
      },
      canGoNextStep() {
        return true;
      },
      toggleStyle() {
        this.isBaseInfoFill = !this.isBaseInfoFill;
      },
      // 提交审核
      submitExamine() {

      }
    }
  };
</script>
<style lang="scss">
  .bid-dialog {
    margin: 1rem 0.5rem 0;
    .bid-dialog {
      .weui-cell__bd {
        border: 1px solid #d9d9d9;
      }
    }
  }

  .next-step {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    .weui-btn {
      border-radius: 0;
    }
    .weui-btn:after {
      border-radius: 0;
    }
  }

  .second-step-container {
    .toggle-nav {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 1rem;
      span {
        flex: 1;
        height: 100%;
        line-height: 1rem;
        text-align: center;
        border: 1px solid #d9d9d9;
      }
      .current-clr {
        background-color: #00bcd4;
        color: #fff;
        border: none;
      }
    }
    .baseinfo-dialog {
      .weui-label {
        font-size: 0.4rem;
      }
    }
    .bottom-btn {
      position: fixed;
      width: 100%;
      height: 1.2rem;
      bottom: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        flex: 1;
        height: 100%;
        border: 1px solid rgba(0, 0, 0, 0.2);
        box-sizing: border-box;
        color: #000000;
        background-color: #f8f8f8;
      }
    }
  }
</style>